<template>
  <a-drawer v-model:open="open" width="50%"
            :footer="null"
            style="top: 20px"
            title="职位配置"
            :keyboard="false"
            :mask-closable="false"
            @close="handleClose"
            @cancel="handleClose">
    <div>
      <a-table
          :columns="columns"
          rowClassName="items"
          :loading="tableLoading"
          rowKey="id"
          :pagination="false"
          :data-source="tableData"
          style="height:calc(100vh - 215px)"
          size="small"  bordered>
        <template #bodyCell="{ column,text,record,index }">
          <template v-if="column.dataIndex==='zhiweinum'">
            <a-input-number v-model:value="record.zhiweinum" @change="handleChangeItem(record)" placeholder="请填写" min="0" max="100"></a-input-number>
          </template>
        </template>
      </a-table>
    </div>
  </a-drawer>
</template>
<script setup>
const open = ref(false)
const tableLoading = ref(false)
const tableData = ref([]);
const emits = defineEmits(["success"])
const total = ref(0)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 500,
  status: 1,
  xinxiId:"",
  keyword: ''
})

const columns = [
  {title: '职务名称', dataIndex: 'zhiWeiMing',align:"center"},
  {title: '数量', dataIndex: 'zhiweinum',align:"center", width: 200}
];

/**
 * 查询列表数据
 */
const handleLoadData = async ()=>{
  tableLoading.value = true
  const resp = await useLoadChuanBoZhiWeiApi(queryParams)
  tableLoading.value = false
  tableData.value = resp.data.records
  total.value = resp.data.total
}

const handleClose = ()=>{
  open.value = false;
  tableData.value = []
  queryParams.value = {
    pageNo: 1,
    pageSize: 500,
    status: null,
    xinxiId:"",
    keyword: ''
  }
  emits("success")
}

const handleChangeItem = async (record)=>{
  var params = {
    xinXiId:queryParams.xinxiId,
    zhiWeiId:record.id,
    shuLiang:record.zhiweinum
  }
  try {
    const resp = await useSaveUpdateChuanBoXinXiZhiweiApi(params)
    useMessage().success("配置成功")
  }catch (e) {
    useMessage().err(e.msg)
  }
}

const handleOpen = (xinxiId)=>{
  open.value = true;
  queryParams.xinxiId = xinxiId
  handleLoadData()
}

defineExpose({
  handleOpen
})
</script>
